<template>
  <div class="view-box">
    <div
      ref="dragWrapper"
      class="org-tree-drag-wrapper"
      @mousedown="mousedownView"
      @contextmenu="handleDocumentContextmenu"
    >
      <div class="org-tree-wrapper" :style="orgTreeStyle">
        <v-org-tree
          v-if="data"
          :data="data"
          :node-render="nodeRender"
          :expand-all="true"
          @on-node-click="handleNodeClick"
          collapsable
        ></v-org-tree>
      </div>
    </div>
  </div>
</template>

<script>
import { on, off } from "@/utils/tools";
const menuList = [
  {
    key: "edit",
    label: "编辑部门",
  },
  {
    key: "detail",
    label: "查看部门",
  },
  {
    key: "new",
    label: "新增子部门",
  },
  {
    key: "delete",
    label: "删除部门",
  },
];
export default {
  name: "OrgView",
  data() {
    return {
      data: {
        id: 0,
        label: "XXX科技有限公司",
        children: [
          {
            id: 2,
            label: "产品研发部",
            children: [
              {
                id: 5,
                label: "研发-前端",
              },
              {
                id: 6,
                label: "研发-后端",
              },
              {
                id: 9,
                label: "UI设计",
              },
              {
                id: 10,
                label: "产品经理",
              },
            ],
          },
          {
            id: 3,
            label: "销售部",
            children: [
              {
                id: 7,
                label: "销售一部",
              },
              {
                id: 8,
                label: "销售二部",
              },
            ],
          },
          {
            id: 4,
            label: "财务部",
          },
          {
            id: 11,
            label: "HR人事",
          },
        ],
      },
      currentContextMenuId: "",
      orgTreeOffsetLeft: 0,
      orgTreeOffsetTop: 0,
      initPageX: 0,
      initPageY: 0,
      oldMarginLeft: 0,
      oldMarginTop: 0,
      canMove: false,
    };
  },
  computed: {
    orgTreeStyle() {
      return {
        transform: `translate(-50%, -50%) scale(${this.zoomHandled}, ${this.zoomHandled})`,
        marginLeft: `${this.orgTreeOffsetLeft}px`,
        marginTop: `${this.orgTreeOffsetTop}px`,
      };
    },
  },
  methods: {
    handleNodeClick(e, data, expand) {
      expand();
    },
    closeMenu() {
      this.currentContextMenuId = "";
    },
    getBgColor(data) {
      return this.currentContextMenuId === data.id
        ? data.isRoot
          ? "#0d7fe8"
          : "#5d6c7b"
        : "";
    },
    nodeRender(h, data) {
      return (
        <div
          class={[
            "custom-org-node",
            data.children && data.children.length ? "has-children-label" : "",
          ]}
          on-mousedown={(event) => event.stopPropagation()}
          on-contextmenu={this.contextmenu.bind(this, data)}
        >
          {data.label}
          <dropdown
            trigger="custom"
            class="context-menu"
            visible={this.currentContextMenuId === data.id}
            nativeOn-click={this.handleDropdownClick}
            on-on-click={this.handleContextMenuClick.bind(this, data)}
            style={{
              transform: `scale(${1 / this.zoomHandled}, ${
                1 / this.zoomHandled
              })`,
            }}
            v-click-outside={this.closeMenu}
          >
            <dropdown-menu slot="list">
              {menuList.map((item) => {
                return (
                  <dropdown-item name={item.key}>{item.label}</dropdown-item>
                );
              })}
            </dropdown-menu>
          </dropdown>
        </div>
      );
    },
    contextmenu(data, $event) {
      let event = $event || window.event;
      event.preventDefault
        ? event.preventDefault()
        : (event.returnValue = false);
      this.currentContextMenuId = data.id;
    },
    setDepartmentData(data) {
      data.isRoot = true;
      this.departmentData = data;
    },
    mousedownView(event) {
      this.canMove = true;
      this.initPageX = event.pageX;
      this.initPageY = event.pageY;
      this.oldMarginLeft = this.orgTreeOffsetLeft;
      this.oldMarginTop = this.orgTreeOffsetTop;
      on(document, "mousemove", this.mousemoveView);
      on(document, "mouseup", this.mouseupView);
    },
    mousemoveView(event) {
      if (!this.canMove) return;
      const { pageX, pageY } = event;
      this.orgTreeOffsetLeft = this.oldMarginLeft + pageX - this.initPageX;
      this.orgTreeOffsetTop = this.oldMarginTop + pageY - this.initPageY;
    },
    mouseupView() {
      this.canMove = false;
      off(document, "mousemove", this.mousemoveView);
      off(document, "mouseup", this.mouseupView);
    },
    handleDropdownClick(event) {
      event.stopPropagation();
    },
    handleDocumentContextmenu() {
      this.canMove = false;
    },
    handleContextMenuClick(data, key) {
      console.log(data,key,'点击节点')
    },
  },
  mounted() {
    on(document, "contextmenu", this.handleDocumentContextmenu);
  },
  beforeDestroy() {
    off(document, "contextmenu", this.handleDocumentContextmenu);
  },
};
</script>
<style scoped lang='scss'>
.view-box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  cursor: move;
  .org-tree-drag-wrapper {
    width: 100%;
    height: 100%;
  }
  .org-tree-wrapper {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 20%;
    transition: transform 0.2s ease-out;
    .org-tree-node-label {
      box-shadow: 0px 2px 12px 0px rgba(143, 154, 165, 0.4);
      border-radius: 4px;
      .org-tree-node-label-inner {
        padding: 0;
        .custom-org-node {
          padding: 14px 41px;
          background: #738699;
          user-select: none;
          word-wrap: none;
          white-space: nowrap;
          border-radius: 4px;
          color: #ffffff;
          font-size: 14px;
          font-weight: 500;
          line-height: 20px;
          transition: background 0.1s ease-in;
          cursor: default;
          &:hover {
            background: #5d6c7b;
            transition: background 0.1s ease-in;
          }
          &.has-children-label {
            cursor: pointer;
          }
          .context-menu {
            position: absolute;
            right: -10px;
            bottom: 20px;
            z-index: 10;
          }
        }
      }
    }
  }
}
</style>
